<template>
	<view class="handBarrage" :style="backList[backNum]">
		<view class="backDiv" :style="[{'top':StatusBar ? StatusBar + 6 + 'px' : '26px'}]" @click="back()"
			v-show="bottomShow">
			<uni-icons type="left" size="32" class="back" color="#fff"></uni-icons>
		</view>
		<view class="main" @click="mainClick">
			<view class="text" id="scText"
				:style="textFontSizeList[textNum]+textColorList[textColorNum]+'margin-left:'+textMargLeft+'px;'">
				{{ htmlText }}
			</view>

		</view>
		<view class="bottom" v-show="bottomShow">
			<view v-show="!inputShow">
				<view class="list">
					<view v-for="(item,index) in botList" :key="index" class="item" @click="listitemClick(item,index)">
						<uni-icons :type="item.icon" size="44" color="#fff"></uni-icons>
						<text class="text">{{ item.lable }}</text>
						<text class="badge" v-if="item.badge">{{ item.badge }}</text>
					</view>
				</view>
			</view>
			<view v-show="inputShow">
				<view class="inputDiv">
					<input type="text" v-model="inputText" />
					<button @click="sendClick">发送</button>
				</view>
			</view>
			<view :style="[{'height':bottomSafeHeight+'px'}]"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputText: '',
				StatusBar: this.StatusBar, //状态栏高度
				navheight: this.navheight, //导航条高度
				bottomSafeHeight: this.bottomSafeHeight, //安全区域高度
				botList: [{
						lable: '文字',
						icon: 'compose',
						badge: '',
					},
					{
						lable: '字号',
						icon: 'font',
						badge: '1',
					},
					{
						lable: '颜色',
						icon: 'color',
						badge: '1',
					},
					{
						lable: '背景',
						icon: 'map',
						badge: '1',
					},
					{
						lable: '速度',
						icon: 'refreshempty',
						badge: '1',
					}
				],
				inputShow: false, //是否输入的控制显示与否
				htmlText: '请输入弹幕',
				textNum: 0,
				textFontSizeList: ['font-size:66px;', 'font-size:88px;', 'font-size:118px;', 'font-size:130px;'],
				textColorNum: 0,
				textColorList: ['color:#fff;', 'color:#e43d33;', 'color:#d4e4ff;', 'color:#2979ff;', 'color:#8cde9b;',
					'color:#f3a73f;'
				],
				backNum: 0,
				backList: ['background:#000000;', 'background: #3a1823;', 'background: #163f61;', 'background: #93a107;',
					'background: #6f4638;'
				],
				bottomShow: true,
				speedNum: 0, //
				speedList: [20, 10, 5, 1],
				textMargLeft: 0, //文字向上滚动的距离
				DSQtimer: null, //定时器
			}
		},
		methods: {
			/**底部按钮区域的点击处理事件*/
			listitemClick(res, k) {
				if (res.lable == '文字') {
					this.inputShow = true;
				}
				if (res.lable == '字号') {
					this.clearTimer();
					this.clData('textNum', 'textFontSizeList', res);
					setTimeout(() => {
						this.acquireWidth();
					}, 200)
				}
				if (res.lable == '颜色') {
					this.clData('textColorNum', 'textColorList', res)
				}
				if (res.lable == '背景') {
					this.clData('backNum', 'backList', res)
				}
				if (res.lable == '速度') {
					this.clearTimer();
					this.clData('speedNum', 'speedList', res)
					setTimeout(() => {
						this.acquireWidth();
					}, 200)
				}

			},
			/**封装处理数组的事件,方便上述调用*/
			clData(num, list, res) {
				if (this[num] >= this[list].length - 1) {
					this[num] = 0;
					res.badge = 1
				} else {
					this[num]++;
					res.badge = this[num] + 1
				}
			},
			/**中间区域显示隐藏按钮 相关*/
			mainClick() {
				if (this.inputShow) {
					this.inputShow = false
				} else {
					this.bottomShow = !this.bottomShow;
				}
			},
			/**发送按钮,重置速度和文字相关*/
			sendClick() {
				this.htmlText = this.inputText;
				this.inputText = '';
				this.inputShow = false;

				this.clearTimer();
				setTimeout(() => {
					this.acquireWidth();
				}, 200)
			},
			/**获取文字区域的高度(宽度反转90°之后就是高度了)*/
			//用margin-left 控制向上(横屏向右)滚动
			acquireWidth() {
				const vm = this;
				const query = wx.createSelectorQuery().in(this);
				query.select('#scText').boundingClientRect((res) => {
					vm.getMoveTimer(res.height, res)
				}).exec();
			},
			/**获取文本移动的距离 定时器 
			 * @param {Number} height 文本的高度
			 * @return {Number} 文本移动的margin-left;
			 */
			getMoveTimer(height, textC) {
				const vm = this;
				vm.DSQtimer = setInterval(() => {
					vm.textMargLeft = vm.textMargLeft - 1;
					if (height + 50 + textC.top < Math.abs(vm.textMargLeft)) {
						vm.textMargLeft = vm.screenWidth + textC.top
					}
				}, vm.speedList[vm.speedNum])
			},
			back() {
				uni.navigateBack();
			},
			/**清除定时器*/
			clearTimer() {
				console.log('清除文本移动的定时器');
				clearInterval(this.DSQtimer);
				this.DSQtimer = null;
				this.textMargLeft = 0;
			},
		},
		mounted() {
			this.acquireWidth()
		},
		onUnload() {
			this.clearTimer()
		},
	}
</script>

<style lang="less" scoped>
	.handBarrage {
		width: 100vw;
		height: 100vh;
		background-color: #000000;
		color: #fff;
		position: relative;

	}

	/* 返回按钮 */
	.backDiv {
		position: absolute;
		font-weight: bolder;
		left: 1.5rem;
		color: #fff;
		z-index: 10;
	}

	/* 中间区域(文字包围块) */
	.main {
		transform: rotate(90deg);
		position: relative;
		z-index: 5;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		flex-direction: column;

		.text {
			text-align: center;
			white-space: pre;
			/* transform: rotate(90deg);
			color: #fff;
			width: 100vh;
			height: 100vw;
			line-height: 100vw;
			font-size: 65px; */
			// white-space: normal;
			// animation: move 5s linear infinite;
		}
	}

	/* 底部操作栏区域 */
	.bottom {
		position: absolute;
		bottom: 0px;
		left: 0px;
		right: 0px;
		padding: 12px 15px;
		z-index: 10;

		.list {
			display: flex;
			justify-content: space-around;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				padding: 10px;

				.text {
					padding-top: 10px;
				}

				.badge {
					position: absolute;
					top: -0px;
					right: 0px;
					border: 1px solid #fff;
					border-radius: 100px;
					width: 1rem;
					height: 1rem;
					line-height: 1rem;
					text-align: center;
				}
			}
		}

		.inputDiv {
			display: flex;
			justify-content: space-between;

			input {
				color: #fff;
				border: 1px solid #fff;
				border-radius: 10px;
				width: 65%;
				height: 44px;
				padding: 10px;
				line-height: 44px;
			}

			button {
				color: #fff;
				border: 1px solid #fff;
				border-radius: 10px;
				width: 30%;
				height: 44px;
				line-height: 44px;
			}

			button:active {
				background: transparent;
				color: aqua;
			}
		}
	}

	/* 文字滚动的动画,1/10日弃用了  用js处理的 */
	@keyframes move {
		to {
			transform: translateX(-200%);
		}

		from {
			transform: translateX(100%);
		}

	}
</style>